<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<el-form :model="form" :rules="rules" ref="dialogForm" :disabled="mode == 'show'" label-width="110px" label-position="top">
				<el-row :gutter="1">
					<el-col :span="24">
                        <div class="titleBox">
                            {{mode=='show'?'查看生产加工单':mode == 'edit'?'编辑生产加工单':'新增生产加工单'}}
                            <div>
                                <!--<el-button @click="resetForm('dialogForm')" size="">退出</el-button>-->
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存</el-button>
                                <!-- <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存并新增</el-button>
                                <el-button type="danger" @click="back" :disabled="mode == 'show'">退出</el-button> -->
                            </div>
						</div>
					</el-col>
				</el-row>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								基本信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="单据编号" prop="production_code">
								<el-input v-model="form.production_code" placeholder="请输入(不填写自动生成)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="单据日期" prop="production_date">
                                <el-date-picker v-model="form.production_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="计划开工日期" prop="plan_start">
                                <el-date-picker v-model="form.plan_start" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="计划完工日期" prop="plan_end">
                                <el-date-picker v-model="form.plan_end" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="生产车间" prop="workshop">
								<el-input v-model="form.workshop" placeholder="请输入生产车间" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="业务类型" prop="type">
                                <el-select v-model="form.type" clearable placeholder="请选择业务类型" style="width:100%">
                                    <el-option label="普通生产" :value="1"/>
                                    <el-option label="返工生产" :value="2"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="计划员" prop="plan_staff">
                                <el-select v-model="form.plan_staff" filterable clearable placeholder="请选择创建人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="完工状态" prop="end_status">
                                <el-select v-model="form.end_status" clearable placeholder="请选择业务类型" style="width:100%">
                                    <el-option label="未完工" :value="1"/>
                                    <el-option label="已完工" :value="2"/>
                                    <el-option label="生产中" :value="3"/>
                                </el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="12">
							<el-form-item label="备注" prop="remark">
								<el-input v-model="form.remark" placeholder="请输入" type="textarea" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								物料信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :span="24">
							<sc-form-table ref="table" v-model="total_data" :addTemplate="addTemplate" hide-add hide-delete @dataFormChange="dataFormChange" placeholder="暂无数据">
								<el-table-column prop="goods_code" label="物料编码" align="center"></el-table-column>
								<el-table-column prop="goods_name" label="物料名称" align="center">
									<template #default="scope">
                                        <el-input v-model="scope.row.goods_name" placeholder="请选择" clearable readonly class="input" @click="selectCp"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="route_id" label="工艺路线" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.route_id" filterable clearable placeholder="请选择工艺路线" style="width:100%">
                                            <el-option v-for="item in craftList" :key="item.id" :label="item.route_name" :value="item.id"/>
                                        </el-select>
									</template>
                                </el-table-column>
								<el-table-column prop="number" label="数量" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.number" placeholder="请输入数量" clearable @input="number(scope.row)"></el-input>
									</template>
                                </el-table-column>
                                <el-table-column prop="number_up" label="生产数量上限" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.number_up" placeholder="生产数量上限" readonly></el-input>
									</template>
                                </el-table-column>
								<el-table-column prop="unit_name" label="单位" width="100" align="center"></el-table-column>
                                <el-table-column prop="in_number" label="入库数量" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.in_number" placeholder="请输入入库数量" clearable></el-input>
									</template>
                                </el-table-column>
								<el-table-column prop="ware_id" label="预入仓库" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.ware_id" filterable clearable placeholder="请选择预入仓库" style="width:100%">
                                            <el-option v-for="item in wareList" :key="item.id" :label="item.ware_name" :value="item.id"/>
                                        </el-select>
									</template>
                                </el-table-column>
								<el-table-column prop="execute_id" label="执行状态" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.execute_id" placeholder="执行状态" style="width:100%" disabled>
                                            <el-option label="计划" :value="0"/>
                                            <el-option label="开工" :value="1"/>
                                            <el-option label="完工" :value="2"/>
                                        </el-select>
									</template>
                                </el-table-column>
							</sc-form-table>
						</el-col>
					</el-row>
				</el-card>
                <!-- 制单人信息 -->
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								制单信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="创建人" prop="create_staff">
								<el-select v-model="form.create_staff" filterable clearable placeholder="请选择创建人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="创建时间" prop="create_date">
                                <el-date-picker v-model="form.create_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="修改人" prop="update_staff">
                                <el-select v-model="form.update_staff" filterable clearable placeholder="请选择修改人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="修改时间" prop="update_date">
                                <el-date-picker v-model="form.update_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="审核人" prop="check_staff">
                                <el-select v-model="form.check_staff" filterable clearable placeholder="请选择修改人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="审核时间" prop="check_date">
                                <el-date-picker v-model="form.check_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
		</div>
	</div>
    <spare-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></spare-list>
</template>

<script>
import SpareList from '@/views/device/setting/spare/spareList.vue'
export default {
	name: '新增生产加工单',
    components: {SpareList},
	data() {
		return {
			dialog: {
                save:false,
            },
			//表单数据
			form: {
				id: "",
				production_code: "",
				production_date: "",
				plan_start: "",
				plan_end: "",
				type: "",
				plan_staff: "",
				end_status: "",
				remark: "",
				product_id: "",
				number: "",
				route_id: "",
				ware_id: "",
				create_staff: "",
				create_date: "",
				update_staff: "",
				update_date: "",
				check_staff: "",
				check_date: "",
				status: "",
			},
			//验证规则
			rules: {
				goods_name: [{ required: true, message: '请输入物料名称' }],
			},
			customizing: false,
            total_data: [{}],
            clientList: [],
            craftList: [],
            wareList: [],
            mode: ""
		}
	},
	mounted() {
		this.getUser()
        this.getCraft()
        this.getWare()
		if (this.$route.query.id) {
			this.setData()
			this.mode = this.$route.query.zhuangtai
		}
	},
	methods: {
		// 获取人员
        async getUser(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.clientList = res.data;
        },
        // 获取工艺路线
        async getCraft(){
            var res = await this.$API.craft.workroute.all.get();
            this.craftList = res.data;
        },
        // 获取仓库
        async getWare(){
            var res = await this.$API.basicdata.ware.all.get();
            this.wareList = res.data;
        },
		//表单注入数据
		async setData() {
			var reqData = {id: this.$route.query.id}
			var res = await this.$API.production.production.detail.post(reqData);
			this.form.id = this.$route.query.id
			this.form.production_code = res.data.production_code
			this.form.production_date = res.data.production_date
			this.form.plan_start = res.data.plan_start
			this.form.plan_end = res.data.plan_end
			this.form.type = res.data.type
			this.form.plan_staff = res.data.plan_staff
			this.form.end_status = res.data.end_status
			this.form.workshop = res.data.workshop
			this.form.remark = res.data.remark
			this.form.create_staff = Number(res.data.create_staff)
			this.form.create_date = res.data.create_date
			this.form.update_staff = Number(res.data.update_staff)
			this.form.update_date = res.data.update_date
			this.form.check_staff = Number(res.data.check_staff)
			this.form.check_date = res.data.check_date
			this.form.status = res.data.status
            let array = []
            array.push({
                product_id: res.data.product_id,
                number: res.data.number,
                route_id: res.data.route_id,
                ware_id: res.data.ware_id,
                goods_name:res.data.product.goods_name,
                goods_code:res.data.product.goods_code,
                overcharge:res.data.product.overcharge,
                number_up:res.data.number_up,
                unit_name:res.data.product.unit,
                execute_id:res.data.status == 0 ? 0 : (res.data.status == 1 && (res.data.number != res.data.ware_number)) ? 1 : 2,
            })
            this.total_data = array
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
            this.total_data = [{}];
		},
		//表单提交方法
		submit() {
            this.form.product_id = this.total_data[0].product_id
            this.form.number = this.total_data[0].number
            this.form.route_id = this.total_data[0].route_id
            this.form.ware_id = this.total_data[0].ware_id
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.production.production.edit.post(this.form);
					} else {
						res = await this.$API.production.production.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						// this.$emit('success', this.form, this.mode)
						// this.visible = false;
						this.$message.success("操作成功")
						if (this.mode == '') {
							this.resetForm('dialogForm')
						} else {
							this.setData()
						}
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
        selectCp(){
            if(this.mode != 'show'){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('bom')
                })
            }
        },
        handleSuccess(data){
            let array = []
            data.map(item=>{
                array.push({
                    product_id:item.id,
                    goods_name:item.goods_name,
                    goods_code:item.goods_code,
                    unit_name:item.unit_name,
                    execute_id:0,
                    overcharge: item.overcharge
                })
            })
            this.total_data = array
        },
        number(row){
            row.number_up = Math.ceil(Number(row.number) + Number(row.number * (row.overcharge / 100)))
        },
	}
}
</script>
<style>
.sc-upload-multiple[data-v-f680f9e4] .el-upload--picture-card {
	width: 60px;
	height: 60px;
}

[data-v-f680f9e4] .el-upload-list__item {
	width: 60px;
	height: 60px;
}
</style>
<style lang="scss">
.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	max-height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
	.selectBox {
		display: flex;
		align-items: center;
	}
	.el-col {
		margin-right: 20px;
	}
	.el-form-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.el-form-item__label {
			justify-content: flex-start;
		}
		.el-form-item__content {
			width: 100%;
		}
	}
	.box-card {
		margin-bottom: 10px;
	}
	.box-card1 {
		.el-form-item__label {
			justify-content: flex-start;
			height: 0;
		}
	}
	.box-card2 {
		.el-col {
			margin-right: 0;
		}
	}
	.el-form {
		//background: #ffffff;
		//padding: 20px;
		min-height: 90%;
		.titleBox {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.titleBox1 {
			font-weight: 600;
			border: none;
			font-size: 16px;
		}
	}
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
</style>
